import dynamic from 'next/dynamic';
import React, { forwardRef, useRef, useImperativeHandle } from 'react';

const ChatCompletion = dynamic(() => import('./content/ChatCompletion'), { ssr: false });

// eslint-disable-next-line no-empty-pattern
const ChatContentContainer = ({}, ref: React.ForwardedRef<any>) => {
  const scrollRef = useRef<HTMLDivElement>(null);
  useImperativeHandle(ref, () => {
    return scrollRef.current;
  });

  return (
    <div className="flex flex-1 overflow-auto">
      <div ref={scrollRef} className="h-full w-full mx-auto px-32">
        <ChatCompletion />
      </div>
    </div>
  );
};
export default forwardRef(ChatContentContainer);
